<{if $data}>
<div id="switchableMain-<{$widgets_id}>">
    <div id="switchable-<{$widgets_id}>" class="section loading scrollable">
<{if $setting.haslrbtn eq 'true'}>
    <span id="scroller-prev" class="prev disable">&lsaquo; 上一页</span>
    <span id="scroller-next" class="next">下一页 &rsaquo;</span>
    <{/if}>
    <div class="scroller">
        <div class="switchable-content">
            <!-- 1-5 -->
            <img alt="" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg"/>
            <img alt="" src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg"/>
            <!-- 5-10 -->
            <img alt="" src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg"/>
            <!-- 10-15 -->
            <img alt="" src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg"/>
            <img alt="" src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg"/>
            <img alt="" src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg"/>
            <img alt="" src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg"/>
            <img alt="" src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg"/>
        </div>
        <ul class="switchable-triggerBox">
            <li>&bull;</li>
            <li>&bull;</li>
            <li>&bull;</li>
        </ul>
    </div>
    </div>
</div>

<style>
    .scrollable {
        position: relative;
        width: 820px;
    }
    .scrollable .prev, .scrollable .next {
        position: absolute;
        top: 50px;
        color: #666;
        cursor: pointer;
    }
    .scrollable .prev { left: 10px; }
    .scrollable .next { right: 10px; }
    .scrollable .disable { color: #ddd; cursor: default; }

    .scrollable .switchable-triggerBox {
        position: absolute;
        right: 30px;
        top: -10px;
    }
    .scrollable .switchable-triggerBox li {
        float: left;
        padding: 5px;
        font-size: 18px;
        cursor: pointer;
    }
    .scrollable .switchable-triggerBox li.active {
        color: #C8282B;
    }

    .scroller {
        position: relative;
        width: 680px;
        height: 120px;
        border: 1px solid #ccc;
        background-color: #F9F9F9;
        margin: auto;
        overflow: hidden;
    }
    .scroller .switchable-content img {
        float: left;
        width: 100px;
        height: 75px;
        padding: 2px;
        margin: 20px 15px;
        background-color: #fff;
        border: 1px solid #ccc;
        display: inline !important; /* fix ie6 双边距 bug */
    }
</style>

<script>
    new Switchable('switchable-<{$widgets_id}>', {
        eventType:"<{$setting.eventType|default:'mouse'}>",
        hasTriggers:<{$setting.hasTriggers|default:'true'}>,         
        step:<{$setting.step|default:5}>,                         
        viewSize:[<{$setting.viewSizeWidth|default:680}>,<{$setting.viewSizeHeight|default:120}>],
        autoplay:<{$setting.autoplay|default:'true'}>,                 
        circular:<{$setting.around|default:'true'}>, 
        interval:<{$setting.interval|default:1000}>,                        
        pauseOnHover:<{$setting.pauseOnHover|default:'true'}>,
        islazyload:<{$setting.islazyload|default:'false'}>,
        effect:"<{$setting.effect|default:'scrollx'}>",
        duration:<{$setting.duration|default:500}>,
        haslrbtn:<{$setting.haslrbtn|default:'true'}>,
        disableCls:'disable',
        lazyDataType:'img',                    
    });
</script>
<{/if}>
